<template>
  <div class="add-template">
    <IndexTop></IndexTop>
    <div class="add-template-top">
      <div class="template-top-search">
        <input type="text" placeholder="搜索你想要的模板" />
        <div class="search">
          <svg-icon icon-class="sousuo"></svg-icon>
        </div>
      </div>
      <div class="template-top-sidebar">
        <div style="margin-left:-20px">
          <span v-for="(item, idx) in industry" :key="idx">{{item.text}}</span>
        </div>
      </div>
      <div class="template-top-con">
        <div style="margin-left:-20px">
          <span v-for="(item, idx) in industry" :key="idx">{{item.text}}</span>
        </div>
      </div>
    </div>
    <div class="template-list">
      <div class="template-list-const" @click="goDiyPage">
        <div>
          <img src="@/assets/config_images/kongbai.png" alt />
        </div>
        <span style="margin-top:20px;cursor: pointer;">使用空模板</span>
      </div>
      <!-- <div class="template-list-item" @mouseenter="showModel = true" @mouseleave="showModel = false"> -->
      <div class="template-list-item">
        <div v-if="showModel" class="template-list-model">
          <div class="template-list-item-img">
            <img src="@/assets/config_images/ercard.png" alt />
            <p style="color:#fff">扫码查看</p>
          </div>
          <div class="item-btn">
            <span>预览</span>
          </div>
          <div class="item-btn">
            <span>使用</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import IndexTop from "@/components/IndexCon/userindextop";
import { initApply } from "@/api/apply";
export default {
  components: {
    IndexTop
  },
  data() {
    return {
      showModel: true,
      type: '',
      industry: [
        {
          id: 0,
          text: "全部行业",
          key: ""
        },
        {
          id: 1,
          text: "电商",
          key: ""
        },
        {
          id: 0,
          text: "生活服务",
          key: ""
        },
        {
          id: 0,
          text: "餐饮",
          key: ""
        }
      ]
    };
  },
  mounted() {
    this.type = this.$route.query.type;
  },
  methods: {
    enter() {
      console.log("aaa");
    },
    leave() {
      console.log("nnn");
    },
    goDiyPage() {
      initApply(this.type).then(res => {
        if (res.code === 200) {
          this.$router.push('/diyview?applyId=' + res.data.app_id);
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.add-template {
  width: 100%;
  height: auto;
  .add-template-top {
    width: 90%;
    height: 190px;
    padding: 20px 20px;
    margin: 70px auto 0;
    position: relative;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    .template-top-search {
      width: 310px;
      height: 34px;
      display: flex;
      border-radius: 1px;
      border: 1px solid rgba(223, 223, 223, 1);
      justify-content: space-between;
      input {
        width: 271px;
        font-size: 12px;
        color: #a2a2a2;
        padding-left: 20px;
        border: none;
      }
      .search {
        width: 43px;
        height: 34px;
        background: rgba(57, 125, 255, 1);
        border-radius: 1px;
        text-align: center;
        line-height: 34px;
        margin-top: -1px;
      }
    }
    .template-top-sidebar,
    .template-top-con {
      width: 100%;
      height: 45px;
      display: flex;
      color: #606266;
      font-size: 14px;
      border-bottom: 1px solid #dfdfdf;
      align-items: center;
      span {
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .template-top-con {
      border: none;
    }
  }
  .template-list {
    width: 90%;
    height: 820px;
    padding: 32px;
    display: flex;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin: 30px auto;
    .template-list-const,
    .template-list-item {
      width: 174px;
      height: 315px;
      position: relative;
      text-align: center;
      color: #9e9e9e;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.15);
      border-radius: 3px;
      margin-left: 20px;
      .template-list-model {
        position: absolute;
        top: 0;
        left: 0;
        width: 174px;
        height: 315px;
        padding-top: 45px;
        padding-bottom: 45px;
        background: rgba(0, 0, 0, 0.45);
        box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        img {
          width: 75px;
          height: 75px;
        }
        .item-btn {
          width: 75px;
          height: 24px;
          color: #ffffff;
          text-align: center;
          line-height: 24px;
          background: rgba(121, 176, 255, 1);
          border-radius: 15px;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
    .template-list-item {
      background-image: url("../../../assets/config_images/Bitmap.png");
      background-size: cover;
    }
  }
}
</style>
